// let a = [
//     0 ,1 ,2 ,3 ,
//     4 ,5 ,6 ,7 ,
//     8 ,9 ,10,11,
//     12,13,14,15
// ]

// let b = [
//     0,4,8 ,12,
//     1,5,9 ,13,
//     2,6,10,14,
//     3,7,11,15
// ]

class Init {
    constructor() {
        this.div = null;
        this.lis = null;

        this.sizeGird = 50;
        this.size = 8;
        this.len = null;
        this.array = [];
    }
    start() {

        this.ul = document.querySelector('#list');
        this.lis = document.getElementsByTagName('li');
        this.len = this.size * this.size;

        this.createElement();
        // 列换成行
        this.array = this.changeXY(this.array, this.size);
        // 再次调用行会变成列
        // this.array = this.changeXY(this.array,this.size);

        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].innerHTML = this.array[i];
        }

    }
    createElement() {
        this.ul.style.width = this.sizeGird * this.size + 'px';
        // 创建元素
        for (let i = 0; i < this.len; i++) {
            this.li = document.createElement('li');
            this.li.style.width = this.sizeGird + 'px';
            this.li.style.height = this.sizeGird + 'px';

            this.li.innerHTML = i;
            this.array.push(i);
            this.ul.appendChild(this.li);
        }
    }
    changeXY(arr, size) {
        let newArr = [];
        let iNow = 0;
        d();

        function d() {
            if (size == iNow) {
                return;
            }
            for (let i = 0; i < arr.length; i++) {
                if (i % size == iNow) {
                    newArr.push(arr[i]);
                }
            }
            iNow++;
            d()
        }
        return newArr;
    }
}


let init = new Init();
init.start();